import { Button, ColorPicker } from 'antd';
import { HighlighterIcon } from 'lucide-react';
import { useEditorStore } from '@/store/useEditorZustand';
import { useState, useEffect } from 'react';

const HighLight = () => {
  const { editor } = useEditorStore();

  const currentColor = editor?.getAttributes('highlight').color;

  const [color, setColor] = useState(currentColor);

  useEffect(() => {
    setColor(currentColor);
  }, [currentColor]);

  const handelr = (val) => {
    editor?.chain().focus().toggleHighlight({ color: val.toHexString() }).run();
    setColor(val.toHexString());
  };
  return (
    <ColorPicker onChange={handelr} value={color}>
      <Button type="text" icon={<HighlighterIcon className="size-4" />} />
    </ColorPicker>
  );
};

export default HighLight;
